let navlis = document.querySelectorAll('nav ul li');
let cards = document.querySelectorAll('.card');
let cirs = document.querySelectorAll('.cir')

for (let i = 0; i < navlis.length; i++) {
  navlis[i].addEventListener('click', function (e) {
    for (let li of navlis) {
      li.className = '';
    }
    this.className = 'active';
  })
}

let showIndex = 0;
setInterval(() => {
  for (let cir of cirs) {
    cir.className = 'cir';
  }
  for (let card of cards) {
    card.className = 'card';
  }
  if (showIndex === 0) {
    showIndex = 1;
  } else {
    showIndex = 0;
  }
  cards[showIndex].className = 'card show';
  cirs[showIndex].className = 'cir cir-show';
}, 3000);

for (let i = 0; i < cirs.length; i++) {
  cirs[i].addEventListener('click', function () {
    for (let cir of cirs) {
      cir.className = 'cir';
    }
    for (let card of cards) {
      card.className = 'card';
    }
    cards[i].className = 'card show';
    cirs[i].className = 'cir cir-show';
  })
}
